// form
var getCurrentIndex = function () {
  var jqCurrent    = jq.list.find('.current .title');
  return jqCurrent.attr('index');
}
var collectForm = function () {
  var params = {};
  params.title    = jq.title.val();
  params.resource = jq.resource.val();
  params.body     = jq.body.val();
  params.currentIndex    = getCurrentIndex();

  return params;
}
var submitForm = function (callBack) {
  $.get('/make/save/'+currentIndex, collectForm(), callBack);
}

var clearForm = function () {
  jq.title.val('');
  jq.resource.val('');
  jq.body.val('');
}

var fillForm = function (component) {
  if (component.title) jq.title.val(component.title);
  jq.resource.val(component.resource);
  jq.body.val(component.body);
}

var loadForm = function (p) {
  eval('var component = ' + p + ';');
  fillForm(component);
}

// click: fill button
var fillOnClick = function () {
  showMask();
  $.get('/make/fill', {q:$('input.title').val()}, _fill);
};

events.fillClick = function () {
  $('.fill.button').click( fillOnClick );
  jq.title.keypress( function (evt) {
    // TODO make it happen
    if (evt.keyCode == 13) fillOnClick ;
  });
};

var _fill = function (payload) {
  eval("var component = " + payload + ";");
  fillForm(component);
  hideMask();
};

// click: find resource button
var TEMPLATE_THUMB_PATH = '/template_thumbs/';
var findOnClick = function () {
  showMask();
  $.get('/make/find_resource', {q:jq.resource.val()}, _findResource);
}
events.findClick = function () {
  $('.findResource.button').click( findOnClick );
};

var _findResource = function (payload) {
  eval("var templates = " + payload + ";");
  showMask('content');
  for (var i=0; i<templates.length; i++) {
    var t = templates[i];
    var jqElem = $(html.template);
    jq.content.append(jqElem);
    jqElem.find('.name').html(t.name);
    jqElem.find('.thumb').attr('src', TEMPLATE_THUMB_PATH + t.name + '.jpg');
    jqElem.find('.thumb').attr('name', t.name);
    jqElem.find('.tagLine').html(t.tag_line);
  }
  
  registerThumbEvents();
};

var registerThumbEvents = function() {
  var jqTemplates = jq.mask.find('.template');
  jqTemplates.hover( function () {
    var jqThumb = $(this).find('.thumb');
    jqThumb.css('margin-top', 0);
    jqThumb.siblings().show();
  }, function () {
    var jqThumb = $(this).find('.thumb');
    jqThumb.css('margin-top', 20);
    jqThumb.siblings().hide();
  });

  var jqThumbs = jqTemplates.find('.thumb');
  jqThumbs.click( function () {
    jq.resource.val($(this).attr('name'));
    hideMask();
  });
}

// click save
var saveOnClick = function () {
  jq.content.html(jq.title.val() + '<br/>====' + jq.resource.val() + '====<br />' + jq.body.val().replace(/\n/g, "<br />"));
  showMask('content');
};

events.saveClick = function () {
  $('.save').click( saveOnClick );
};

var clearComponents = function () {
  jq.makeZone.append(jq.hoverMenu);
  jq.list.empty();
  clearForm();
};

// click download
var _download = function (p) {
  eval("var payload = " + p + ";");
  document.location = payload.redirect_to;
}

var downloadOnClick = function () {
  var params = collectForm();
  params.name = $('.projectName').val();

  $.get('/make/download/', params, function (p) {_download(p)} );
}

events.downloadClick = function () {
  $('.download').click( downloadOnClick );
}

// click archive
var archiveOnClick = function () {
  var params = collectForm();
  params.name = $('.projectName').val();
  $.get('/make/archive/', params);
}

events.archiveClick = function () {
  $('.archive').click( archiveOnClick );
}
